<template>
  <div>
    <div class="search">
      <div class="selectItem selectcirclr act">
        <Tabs class="select-tabs"  size="small" @on-click="select">
        <template #extra>
          <div>
            <Input v-model="value" placeholder="搜索" style="width: 300px" />
          </div>
        </template>
          <TabPane
          :label="item.title"
          :name="item.name"
          v-for="(item, index) in list"
          :key="index" >
            <!-- <div class="lookall">查看全部</div> -->
            <addrecommend @upquanziList="getstarList" :classData="classData" v-if="classData.length > 0"></addrecommend>
            <div v-else>
              <img src="@/assets/communityimg/empty.png"/>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { useradinfor} from "@/api/community";
import addrecommend from "./addfriendcap/addrecommend.vue";
export default {
  components: {
    addrecommend,
  },
  data() {
    return {
      value:'',
        //分类的·数据
        classData:[],
      activeData:[],
      myjoinlist:[],
      // 右边的圈子（全部）
      allcirclelist:[],
      // 右边圈子（我的）
      mycirclelist:[],
      list: [ ],
      selectType: "max",
      circlrType: "1",
      selectactType: "1",
      timer: null
    };
  },
  watch: {
    selectType() {
      this.getstarList();
    },
    value() {
      if(this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(()=> {
        this.getstarList()
      },800)
    }
  },
  mounted() {
    this.getstarList();
  },
  methods: {
    // 获取明星好友右边列表
    getstarList() {
      useradinfor({
        mid: JSON.parse(localStorage.userInfo).id,
        type: this.selectType,
        page: 1,
        pagesize: 10000,
        keyword:this.value,
      }).then((res) => {
        console.log(this.selectType,'我的列表',res);
        //设置默认id
         this.selectType = this.selectType == "" ? res.typelist[0].id : this.selectType;
          //数据
          this.classData=res.data
          // console.log( res,'classdata');
          //导航栏
          if(this.list.length <= 0) {
            this.list = res.typelist
            this.list.unshift({
              id:'max',
              title: '推荐'
            });
          }

      });
    },
        // 获取右边的明星
        select(v) {
          this.selectType=this.list[v].id
        },
  },
};
</script>

<style lang="scss" scoped>
.search {
  // width: 100%;
  height: 41px;
  background: #ffffff;
  border-radius: 6px;
  // border: 1px solid red;
  // display: flex;
  // align-items: flex-end;
  // justify-content: space-between;
  .searchTabs {
    width: 300px;
    height: 200px;
    background-color: black;
  }
}
</style>
